<template>
  <div>
    <div class="logo">
      <van-image
        :src="require('../assets/img/引导页/2.jpg')"
        style="width: 80%"
      />
    </div>
    <div class="information">
      <h3 style="font-weight: 400">登录成为喜·贵宾<br />尊享贵宾特权与积分</h3>
      <div class="fieldPart">
        <van-cell-group>
          <van-field
            v-model="username"
            label="用户名"
            placeholder="请输入用户名"
          />
          <van-field v-model="password" label="密码" placeholder="请输入密码" />
        </van-cell-group>
      </div>
      <div class="button">
        <van-button @click="login" class="button1">登录</van-button>
        <van-button @click="goregister" class="button2">注册</van-button>
      </div>
      <van-row gutter="20" class="fonter1">
        <van-col span="12">
          <input
            type="radio"
            name="gender"
            value="man"
            id="man"
            v-model="ld"
            @click="set_id"
          />
          <label for="man" style="font-size: 13px">勾选用户协议</label>
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
import storage from "../mydata/storage.js";
export default {
  name: "loginitem",
  data() {
    return {
      username: "admin",
      password: "123456",
      ld: false,
    };
  },
  methods: {
    set_id: function () {
      this.ld = true;
    },
    login: function () {
      var data = storage.get("userinfo");
      if (this.ld == false) {
        Toast.fail("您未勾选用户隐私协议！");
      } else if (
        this.username == data.username &&
        this.password == data.password
      ) {
        var sessionstorage = window.sessionStorage;
        sessionstorage.setItem(name, this.username);
        this.$router.push("/homepage");
      } else {
        Toast.fail("用户名和密码错误");
      }
    },
    goregister: function () {
      this.$router.push("/login/register");
    },
    findpass: function () {
      this.$router.push("/login/find");
    },
  },
};
</script>
<style scoped>
.login1 {
  background-color: rgb(243, 241, 228);
}
.logo {
  width: 100%;
  display: relative;
  margin-top: 50px;
}
.fieldPart {
  display: relative;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}
.information {
  display: relative;
  margin: 20px auto;
}
.information h3 {
  margin: 0;
  margin-bottom: 10px;
}
.button {
  display: relative;
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
}
.button1,
.button2 {
  width: 40%;
  height: 40px;
  border-radius: 15px;
  color: aliceblue;
  background-color: rgb(1, 1, 1);
}
.button1 {
  margin-right: 10px;
}
.fonter1 {
  margin-top: 10px;
  padding-bottom: 10px;
}
.fonter1 p {
  margin: 0;
}
</style>
